<template>
  <div class="home">
    <header>
      <span class="iconfont icon-caidan" @click="menuClick"></span>
      <div class="menu">
        <!-- <i class="iconfont icon-yinleyanzou active"></i> -->
        <i></i>
        <span>网抑云</span>
        <i class="iconfont icon-dianying" @click="movieClick"></i>
      </div>
      <span class="iconfont icon-41" @click="searchClick"></span>
    </header>
    <nav>
      <router-link class="menu" to="/recommend">
        <span>推荐</span>
      </router-link>
      <router-link class="menu" to="/singers">
        <span>歌手</span>
      </router-link>
      <router-link class="menu" to="/rank">
        <span>排行榜</span>
      </router-link>
    </nav>

    <div class="box"></div>
    <!-- 路由占位符 -->
    <div class="content">
      <keep-alive v-if="$route.path != '/movie'">
        <router-view />
      </keep-alive>
      <transition
        v-else
        enter-active-class="search-slide-in"
        leave-active-class="search-slide-out"
      >
        <router-view />
      </transition>
    </div>
    <!-- 迷你播放器 -->
    <mini-play />
    <!-- 音乐搜索 -->
    <transition
      enter-active-class="search-slide-in"
      leave-active-class="search-slide-out"
    >
      <search-popup v-if="ShowSharch" v-model="ShowSharch" />
    </transition>
    <!-- 菜单 -->
    <transition
      enter-active-class="menu-slide-in"
      leave-active-class="menu-slide-out"
    >
      <menu-popup v-if="ShowMenu" v-model="ShowMenu" @goLogin="goLogin" />
    </transition>
    <!-- 登录 -->
    <transition
      enter-active-class="login-slide-in"
      leave-active-class="login-slide-out"
    >
      <login v-if="ShowLogin" v-model="ShowLogin" />
    </transition>
    <!-- 遮罩层 -->
    <transition
      enter-active-class="popup-fade-in"
      leave-active-class="popup-fade-out"
    >
      <div class="xy-shadow" v-show="ShowSharch"></div>
    </transition>
    <transition
      enter-active-class="popup-fade-in"
      leave-active-class="popup-fade-out"
    >
      <div class="xy-shadow" v-show="ShowMenu"></div>
    </transition>
    <transition
      enter-active-class="popup-fade-in"
      leave-active-class="popup-fade-out"
    >
      <div class="xy-shadow" v-show="ShowLogin"></div>
    </transition>
    <!-- ------------------ -->
  </div>
</template>

<script>
import SearchPopup from "@/components/home/SearchPopup.vue";
import MiniPlay from "./player/MiniPlay.vue";
import MenuPopup from "@/components/home/MenuPopup.vue";
import Login from "@/components/home/Login.vue";
import {
  getLogStatus,
  getUserDetail,
  getLikeList,
} from "@/network/api";
import Movie from "@/components/movie/Movie.vue";
export default {
  components: { MiniPlay, SearchPopup, MenuPopup, Login, Movie },
  name: "Home",
  data() {
    return {
      ShowSharch: false, //搜索
      ShowMenu: false, //菜单
      ShowLogin: false, //登录
      showMovie: false, //电影频道
    };
  },
  created() {
    // 更新登录状态
    this.bus.$on("upLog", () => {
      this.upLog();
    });
    this.upLog();
  },
  methods: {
    async upLog() {
      let { code, profile } = await getLogStatus()
      if (code == 200) {
        getUserDetail(profile.userId).then((res) => {
          this.$store.commit("user/setUserInfo", res.profile);
        });
        //  获取喜欢的音乐
        let { ids } = await getLikeList(profile.userId);
        this.$store.dispatch("user/getLikeSong", { ids: ids.join() });
      }else{
        this.$store.commit("user/setUserInfo",null)
        this.$store.commit("user/setLikeSong", null)
      }
    },
    menuClick() {
      this.ShowMenu = true;
    },
    searchClick() {
      this.ShowSharch = true;
    },
    goLogin() {
      this.ShowLogin = true;
    },
    movieClick() {
      this.$router.push("/movie");
    },
  },
  watch: {
    $route() {},
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/global-style.scss";
.home {
  position: relative;
  header,
  nav {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100;
  }
  header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    background: $theme-color;
    top: 0;
    span {
      color: $font-color-light;
      font-size: 20px;
      &.iconfont {
        font-size: 25px;
      }
    }
    .menu {
      width: 220px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      i {
        color: #fff;
        font-size: 28px;
      }
      .active {
      }
    }
  }
  //导航栏
  nav {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: $theme-color;
    font-size: 14px;
    top: 50px;
    .menu {
      flex: 1;
      span {
        color: $border-color;
      }
    }
    .router-link-active {
      font-weight: 700;
      span {
        padding-bottom: 5px;
        border-bottom: 2px solid $font-color-light;
      }
    }
  }
  .content {
    padding-top: 90px;
    background: $background-color;
  }
}
// 搜索框右侧弹出动画
.search-slide-in {
  animation: searchSlideIn 0.3s;
}
.search-slide-out {
  animation: searchSlideOut 0.3s;
}
@keyframes searchSlideIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes searchSlideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
// 菜单栏左侧弹出动画
.menu-slide-in {
  animation: menuSlideIn 0.3s;
}
.menu-slide-out {
  animation: menuSlideOut 0.3s;
}
@keyframes menuSlideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes menuSlideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
// 登录页底部弹出动画
.login-slide-in {
  animation: loginSlideIn 0.3s;
}
.login-slide-out {
  animation: loginSlideOut 0.3s;
}
@keyframes loginSlideIn {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  60% {
    transform: translateY(0);
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loginSlideOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
</style>
